<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: lalahahababa
 * @LastEditTime: 2022-01-07 17:15:20
-->
<template>
 
  <div ref="right2_container" style="height: 95%"></div>
  
</template>

<script>
import { Gauge } from '@antv/g2plot';

export default {
      data(){
        return{
         dataArr:[],
         percent: 0
        }
    },
    created(){


    },
    mounted(){
      this.initChart()

      },
      methods:{
        initChart() {
          const ticks = [0, 1 / 3, 2 / 3, 1];
          const color = ['#F4664A', '#FAAD14', '#30BF78'];
          const gauge =new Gauge(this.$refs.right2_container, {
            percent: 0,
  range: {
    ticks: [0, 1],
    color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
  },
  indicator: {
    pointer: {
      style: {
        stroke: '#D0D0D0',
      },
    },
    pin: {
      style: {
        stroke: '#D0D0D0',
      },
    },
  },
  statistic: {
    title: {
      formatter: ({ percent }) => {
        if (percent < ticks[1]) {
          return '差';
        }
        if (percent < ticks[2]) {
          return '中';
        }
        return '优';
      },
      style: ({ percent }) => {
        return {
          fontSize: '36px',
          lineHeight: 1,
          color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2],
        };
      },
    },
    content: {
      offsetY: 36,
      style: {
        fontSize: '24px',
        color: '#4B535E',
      },
      formatter: () => '系统表现',
    },
  },

          });
          gauge.render()
          setInterval(()=>{
            if(this.percent <0.5){
              this.percent+=0.01
              gauge.changeData(this.percent); 

            }else{
              this.percent=0.4
            }
          

        },50)
      }
      }
}


</script>


<style scoped>

</style>